<template>
  <div class="inputs">
    <VCurd label="抬头类型">
      <Tabs :tabs="tabs" :ind="info.ind" @changeIndex="changeIndex"></Tabs>
    </VCurd>
    <VCurd label="抬头名称">
      <VInput v-model="info.name"></VInput>
    </VCurd>
    <VCurd label="税号" v-if="info.ind != 2">
      <VInput v-model="info.shuihao"></VInput>
    </VCurd>
    <VCurd label="邮箱">
      <VInput v-model="info.email"></VInput>
    </VCurd>
    <VSwitch></VSwitch>
    <button @click="getinfo">获取</button>
  </div>
</template>

<script setup>
// vue 3中组件引入后不用注册就可以直接使用
import VCurd from "../components/v-curd.vue";
import VInput from "../components/v-input.vue";
import { ref, reactive } from "vue";
import Tabs from "../components/tabs.vue";
import VSwitch from "../components/v-switch.vue";

let info = reactive({
  type: "",
  name: "",
  shuihao: "",
  email: "",
  ind: 0,
});
let tabs = ref(["企业", "非企业", "个人"]);

const getinfo = () => {
  console.log(info, "info");
};

const changeIndex = (index) => {
  console.log(index, "ind");
  info.ind = index;
};
</script>

<style scoped>
</style>